import { createRouter, createWebHistory } from 'vue-router'

const routes = [

  {
    path: "/",
    name: "Index",
    redirect: "/home",//重定向
    component: () => import('@/views/home/index.vue'),
    children: [
      {
        path: 'home',
        name: 'Home',
        component: () => import('@/views/home/component/MyHome.vue')
      },
      {
        path: '/news',
        name: 'News',
        component: () => import('@/views/home/component/MyNews.vue'),
        children: [
          // {
          //   // 配置params参数展位符,如果我们某个参数可穿可不传，则加一个问号
          //   path:'details',
          //   name:'Details',
          //   component: () => import('@/views/NewsDetails.vue'),
          //   //第一种写法 将路由收到的所有【params参数】映射为props属性
          //   //props: true 
          //   //第二种写法 可以自己决定将什么作为props属性
          //   props(route){
          //     return route.query
          //   }
          // }
          {
            // 配置params参数展位符,如果我们某个参数可穿可不传，则加一个问号
            path: 'details/:id/:title/:content?',
            name: 'Details',
            component: () => import('@/views/home/component/NewsDetails.vue'),
            //第一种写法 将路由收到的所有【params参数】映射为props属性
            //props: true 
            //第二种写法 可以自己决定将什么作为props属性
            props(route) {
              return route.params
            }
          }
        ]
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('@/views/home/component/MyAbout.vue')
      }
    ]
  },

  {
    path: '/activiti',
    name: 'Activiti',
    component: () => import('@/views/activiti/index.vue'),
    children: [
      {
        path: 'process',
        name: 'Process',
        component: () => import('@/views/activiti/process.vue')
      },
      {
        path: 'task',
        name: 'Task',
        component: () => import('@/views/activiti/task.vue')
      }
    ]
  },

  {
    path: '/piniaPage',
    name: 'PiniaPage',
    component: () => import('@/views/pinia/index.vue')
  },
  {
    path: '/communication',
    name: 'Communication',
    component: () => import('@/views/communication/index.vue'),
    children: [
      {
        path: 'props',
        name: 'props',
        component: () => import('@/views/communication/component/PropsComponent.vue')
      },
      {
        path: 'customEvent',
        name: 'CustomEvent',
        component: () => import('@/views/communication/component/CustomEventPonent.vue')
      },
      {
        path: 'mitt',
        name: 'Mitt',
        component: () => import('@/views/communication/component/MittComponent.vue')
      },
      {
        path: 'model',
        name: 'Model',
        component: () => import('@/views/communication/component/ModelComponent.vue')
      },
      {
        path: 'attrs',
        name: 'Attrs',
        component: () => import('@/views/communication/component/AttrsComponent.vue')
      },
      {
        path: 'refsParent',
        name: 'RefsParent',
        component: () => import('@/views/communication/component/RefsParentComponent.vue')
      },
      {
        path: 'provideInject',
        name: 'ProvideInject',
        component: () => import('@/views/communication/component/ProvideInjectComponent.vue')
      },
      {
        path: 'pinia',
        name: 'Pinia',
        component: () => import('@/views/communication/component/PiniaComponent.vue')
      },
      {
        path: 'slot',
        name: 'Slot',
        component: () => import('@/views/communication/component/SlotComponent.vue')
      }
    ]
  }

]
const router = createRouter({
  // createWebHistory() history模式是不会携带#号,seo优化比较好，上线需要后端配合解决路径问题  
  // createWebHashHistory()hash模式是带#号的，seo优化不好,上线后一般不需要后端配合
  history: createWebHistory(),
  routes,
})
export default router